<template>
	<!-- pages/address_edit/address_edit.wxml -->
	<view class="address-edit">
		<form @submit="formSubmit" report-submit="true" v-show="!popup_show">
			<view class="title-wrap edit-title">
				<view class="title row-between">
					<text class="title-address">{{mansionData.mansionName}}</text>
					<text>福建·厦门</text>
				</view>
			</view>
			<view class="form bg-white">
				<view class="form-item row">
					<view class="label">楼层</view>
					<picker @change="changeFloor" :range="array" style="height: 100%; width: 70%;">
						<view class="ml10 uni-input">
							<text>{{addressObj.floor}}</text>
							<text style="margin-left: 20rpx;">层</text>
						</view>
					</picker>
					<!-- <input class="ml10" v-model="addressObj.floor" name="floor" type="number" placeholder="请填写楼层" /> -->
				</view>
				<view class="form-item row">
					<view class="label">门牌号</view>
					<input class="ml10" name="houseNumber" v-model="addressObj.houseNumber" placeholder="列如:301"></input>
				</view>
				<view class="form-item row">
					<view class="label">公司名称</view>
					<input class="ml10" name="companyName" v-model="addressObj.companyName" placeholder="请输入公司名称"></input>
				</view>
				<view class="form-item row">
					<view class="label">称呼</view>
					<input class="ml10" name="nickName" v-model="addressObj.nickName" placeholder="请输入姓名或昵称"></input>
				</view>
				<view class="form-item row">
					<view class="label">手机号</view>
					<input class="ml10" name="mobile" v-model="addressObj.mobile" placeholder="请输入手机号"></input>
					<button class="bd-btn br60 row-center" size="sm" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">获取手机号</button>

				</view>
			</view>
			<view class="bg-white check-wrap">
				<radio-group class="row" @click="ChangeIsDefault">
					<text class="label-title">是否常用</text>
					<view class="radio-item">
						<radio id="checkbox" style="border-radius: 50%;transform:scale(0.7)"
							:checked="addressObj.isDefault ? true : false" color="#222e2d" />
						<label cla for="checkbox">
							<text>是</text>
						</label>
					</view>
					<view class="radio-item">
						<radio id="checkbox1" style="margin-left: 10rpx;border-radius: 50%;transform:scale(0.7)"
							:checked="addressObj.isDefault ? false : true" color="#000" />
						<label for="checkbox1">
							<text>否</text>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="footer-fiexd">
				<view class="row-center">
					<checkbox class="agree-checkbox" :checked="isAgree" @click="changeChecked" />
					<view class="row-center">
						<text>我同意</text>
						<view class="agree-text" @click="goToExplain">《用户服务协议及隐私政策》</view>
					</view>
				</view>
				<view class="row-evenly ml30 mr30">
					<button class="flex1 cancel-btn white br60" @click="backPage">取消</button>
					<button class="flex1 my-btn white br60" form-type="submit">完成</button>
				</view>
			</view>
		</form>
		<u-popup v-model="popup_show" width="100%" height="100%" mode="center" :mask="false" :zoom="false">
			<view class="title-wrap">
				<view class="title row-between">
					<!-- <text class="title-address">福建·厦门</text> -->
					<u-search class="popup-search" placeholder="搜索您所在大厦的名称" v-model="keyword" :clearabled="true"
						inputAlign="center" @clear="searchMansion" @search="searchMansion"></u-search>
				</view>
			</view>
			<view class="main-wrap" v-if="mansionList.length">
				<view v-for="(item, index) in mansionList" :key="index" class="item xs mb20">
					<view class="address-wrap" @click="setEdifice(item)">
						<view class="edifice row-between">
							<text class="mansion-name">{{item.name}}</text>
							<text class="distance"
								v-if="item.distance">{{item.distance > 1000 ? `${Number(item.distance)/1000}km` : `${item.distance}m`}}</text>
						</view>
						<view class="time mt10 mb10">预计送达时间：{{item.deliveryTime}}</view>
						<view class="address line2">{{item.address}}</view>
					</view>
				</view>
			</view>
			<view class="main-wrap-empty" v-else />
		</u-popup>
		<loading-view v-if="showLoading" background-color="rgba(255,255,255, .5)" :size="50"></loading-view>
	</view>
</template>

<script>
	import {
		editAddress,
		hasRegionCode,
		addAddress,
		getMansionList,
		getAddressDetail,
		changeUserMobile,
	} from '@/api/user';
	import {
		mapGetters
	} from 'vuex'
	import {
		isLocation
	} from '@/utils/getLocation'
	// import area from '@/utils/area'

	export default {
		data() {
			return {
				listData: [],
				mansionList: [],
				mansionData: {},
				addressObj: {
					isDefault: 0,
					floor: "",
				},
				floorIndex: -1,
				array: [],
				addressId: '',
				popup_show: true,
				showLoading: true,
				keyword: '',
				isAgree: uni.getStorageSync('_isAgree') ? true : false
			};
		},
		props: {},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.id) {
				this.addressId = parseInt(options.id)
				this.popup_show = false
				uni.setNavigationBarTitle({
					title: '修改地址'
				});
				this.getAddressDetailFun();
			} else {
				uni.setNavigationBarTitle({
					title: '新增地址'
				});
				this.getWxAddressFun();
			}
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			// uni.removeStorageSync('wxAddress');
		},

		methods: {
			changeChecked() {
				this.isAgree = !this.isAgree
				uni.setStorageSync('_isAgree', this.isAgree)
			},
			setEdifice(mansionData) {
				this.popup_show = false
				if (mansionData.totalFloor) {
					this.array = Array.from(Array(mansionData.totalFloor).keys(), n => n + 1)
				}
				this.mansionData = {
					mansionName: mansionData.name,
					mansionId: mansionData.id
				}
			},
			changeFloor(e) {
				this.addressObj.floor = parseInt(e.detail.value) + 1
			},
			backPage() {
				uni.navigateBack()
			},
			getPhoneNumber(e) {
				const {
					mobile
				} = this.userInfo

				if (mobile) {
					this.addressObj = {
						...this.addressObj,
						mobile
					}
				} else {
					const {
						encryptedData,
						iv,
						code
					} = e.detail;
					if (encryptedData) {
						changeUserMobile({
							code,
							type: 1,
						}).then(res => {
							if (res.code == 200 && res.msg) {
								this.addressObj = {
									...this.addressObj,
									mobile: res.msg
								}
							} else {
								this.$toast({
									title: '未获取到手机号'
								})
							}
						})
					}
				}
			},
			searchMansion() {
				if (this.keyword == "") {
					this.mansionList = []
					return
				}
				this.mansionList = this.listData.filter(({
					name
				}) => name.includes(this.keyword))
			},
			formSubmit(e) {
				let {
					value
				} = e.detail;
				const {
					addressId
				} = this;
				if (!this.addressObj.floor) return this.$toast({
					title: '请填写楼层'
				});
				if (!value.houseNumber) return this.$toast({
					title: '请填写门牌号'
				});
				if (!value.companyName) return this.$toast({
					title: '请填写公司名称'
				});
				if (!value.nickName) return this.$toast({
					title: '请输入姓名或昵称'
				});
				if (!value.mobile) return this.$toast({
					title: '请填写手机号'
				});
				if (!this.isAgree) {
					return this.$toast({
						title: '请阅读并同意《用户服务协议及隐私政策》'
					})
				}
				const addressInfo = this.addressObj
				const mansionInfo = this.mansionData
				const params = {
					...this.mansionData,
					...this.addressObj,
					...value
				}
				if (addressId) {
					editAddress(params).then(res => {
						if (res.code == 200) {
							this.$toast({
								title: res.msg
							}, {
								tab: 3,
								url: 1
							});
						}
					}).catch(err => {
						return this.$toast({
							title: err
						});
					});
				} else {
					addAddress(params).then(res => {
						if (res.code == 200) {
							this.$toast({
								title: res.msg
							}, {
								tab: 3,
								url: 1
							});
						}
					}).catch(err => {
						return this.$toast({
							title: err
						});
					});
				}
			},
			ChangeIsDefault: function(e) {
				if (this.addressObj.isDefault == 0) {
					this.addressObj.isDefault = 1;
				} else {
					this.addressObj.isDefault = 0;
				}
			},
			goToExplain() {
				uni.navigateTo({
					url: '/pages/bundle/server_explan/server_explan'
				})
			},
			getAddressDetailFun() {
				getAddressDetail(this.addressId).then(res => {
					this.showLoading = false
					if (res.code == 200) {
						const {
							mansionId,
							mansionName,
							totalFloor = 20
						} = res.data
						if (totalFloor) {
							this.array = Array.from(Array(totalFloor).keys(), n => n + 1)
						}
						this.addressObj = res.data;
						this.mansionData = {
							mansionId,
							mansionName,
						}
						// this.region = `${province} ${city} ${district}`
					}
				});
			},
			getWxAddressFun() {
				isLocation((lnglat) => {
					getMansionList(lnglat).then((res) => {
						this.showLoading = false
						if (res.code === 200) {
							// this.mansionList = res.data
							// this.listData = this.mansionList
							this.listData = res.data
						}
					})
				})
			}

		},
		computed: {
			...mapGetters(["userInfo"]),
		}
	};
</script>
<style lang="scss">
	/* pages/address_edit/address_edit.wxss */

	.address-edit {
		position: relative;

		&::before,
		&::after {
			content: '';
			position: fixed;
			z-index: 9;
			top: 0;
			width: 100%;
			height: 20rpx;
			background-color: #FFCC46;
		}

		&::after {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;
		}

		.form {
			flex: 1;

			.form-item {
				padding: 28rpx 0;
				margin: 0 44rpx;
				border-bottom: 1px solid #E0E0E0;
				/* &:not(:nth-of-type(3)) {
					border-bottom: $-solid-border;
				} */

				.label {
					width: 150rpx;
				}

				input {
					height: 100%;
					flex: 1;
				}
			}
		}

		.check-wrap {
			padding: 28rpx 0;
			margin: 0 44rpx;
			border-bottom: 1px solid #E0E0E0;

			.radio-item {
				margin: 0 30rpx 0 40rpx;
			}
		}

		.footer-fiexd {
			position: fixed;
			bottom: 50rpx;
			width: 100%;

			.agree-checkbox {
				padding: 20rpx 0 20rpx;
			}

			.agree-text {
				color: #FFCC46;
			}
		}

		.my-btn {
			margin: 30rpx 40rpx;
			text-align: center;
			background-color: #FF8F00;
		}

		.bd-btn {
			padding: 8rpx 24rpx;
			border: 1px solid $-color-primary;
			color: $-color-primary;
		}

		.cancel-btn {
			margin: 30rpx 40rpx;
			background-color: #F0F0F0;
			color: #FF8F00;
		}

		.title-wrap {
			height: auto;
		}

		.title {
			padding: 20rpx;
			color: #727272;

			.title-address {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}

			.popup-search {
				flex: 1;
			}
		}

		.edit-title {
			padding: 54rpx 44rpx 26rpx;

			.title {
				padding: 0
			}
		}

		.main-wrap-empty {
			margin: 220rpx auto;
			width: 470rpx;
			height: 372rpx;
			background: url(../../static/images/address-empty.png) no-repeat center/contain;
		}

		.main-wrap {
			padding: 20rpx 30rpx;

			.address-wrap {
				padding: 0 20rpx 30rpx;
				margin-bottom: 50rpx;
				border-bottom: 1rpx solid #eee;

				.edifice {
					font-size: 34rpx;
					color: #000;
				}

				.mansion-name {
					font-weight: 500;
				}

				.distance {
					font-size: 28rpx;
					color: #32c908;
					font-weight: 500;
				}

				.time {
					color: #FF8F00;
				}

				.address {
					font-size: 24rpx;
					color: #727272;
				}
			}
		}

	}



	van-field view {
		height: 100%;
	}

	van-field textarea {
		height: 100% !important;
		padding-top: 10rpx !important;
	}

	.van-cell {
		padding: 20rpx !important;
	}

	.van-field__body--textarea,
	.van-field__input {
		margin-left: 15rpx;
	}
</style>